<template>
    <div id="body">
        <!-- 中间编辑部份 -->
        <div class="middle">
            <div class="middle-top">基础信息</div>
            <div class="middle-body">
                <ul>
                    <li>区域
                        <span style="color:red">*</span>
                        <div class="middle-body-box">
                            <input type="text">
                        </div>
                    </li>
                    <li>选择车位
                        <span style="color:red">*</span>
                        <div class="middle-body-box">
                            <select name="region" id="">
                                <option value="01">01</option>
                                <option value="02">02</option>
                                <option value="03">03</option>
                                <option value="04">04</option>
                                <option value="05">05</option>
                            </select>
                        </div>
                    </li>
                    <li>收费类型
                        <span style="color:red">*</span>
                        <div class="middle-body-box"><input type="text" value="临时停车" readonly></div>
                    </li>
                    <li>收费人
                        <span style="color:red">*</span>
                        <div class="middle-body-box"><input type="text"></div>
                    </li>
                    <li>车牌号
                        <span style="color:red">*</span>
                        <div class="middle-body-box"><input type="text"></div>
                    </li>
                    <li>停车时间
                        <span style="color:red">*</span>
                        <div class="middle-body-box"><input type="text"></div>
                    </li>
                    <li>停车时长
                        <span style="color:red">*</span>
                        <div class="middle-body-box mr">
                            <div class="box-box">
                                <a-date-picker v-model="startValue" :disabled-date="disabledStartDate" show-time
                                    format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间"
                                    @openChange="handleStartOpenChange" />
                                至
                                <a-date-picker v-model="endValue" :disabled-date="disabledEndDate" show-time
                                    format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" :open="endOpen"
                                    @openChange="handleEndOpenChange" />
                            </div>
                        </div>

                    </li>
                    <li>费用
                        <span style="color:red">*</span>
                        <div class="middle-body-box"><input type="text"></div>
                    </li>
                    <li>缴纳状态
                        <div class="middle-body-box2">
                            <input type="radio" value="待缴纳" name="No" class="radio" checked />待缴纳
                            <input type="radio" value="已缴纳" name="Yes" class="radio">已缴纳
                        </div>
                    </li>
                    <li>支付方式
                        <span style="color:red">*</span>
                        <div class="middle-body-box">
                            <select name="region" id="">
                                <option value="WeChat">微信</option>
                                <option value="Alipay">支付宝</option>
                                <option value="money">线下支付</option>
                            </select>
                        </div>
                    </li>
                    <li>备注<div class="middle-body-box" style="border:0;"><textarea name="" id="" cols="55" rows="10"
                                placeholder="请输入"></textarea></div>
                    </li>
                </ul>
            </div>
            <div class="middle-footer">
                <button class="middle-footer-button1">提交</button>
                <button class="middle-footer-button2">返回</button>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'ParkingFeeEdit',

    data() {
        return {

        };
    },

    mounted() {

    },

    methods: {

    },
};
</script>

<style lang="less" scoped>
* {
    margin: 0;
    padding: 0;
}

#body {
    margin: 0px;
    background-color: rgba(240, 242, 245, 1);
    background-image: none;
    left: -24px;
    width: 1136px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;

    // 中间编辑部份
    .middle {
        margin-top: 20px;
        width: 1136px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        font-family: 'MalayalamMN', 'Malayalam MN', sans-serif;
        font-weight: 400;
        font-style: normal;
        text-align: left;
        background-color: rgba(255, 255, 255, 1);
        border-color: rgba(233, 233, 233, 1);
        border-width: 1px;
        border-style: solid;
        color: #333333;
        line-height: normal;
        text-transform: none;

        .middle-top {
            border-width: 0px;
            width: 96px;
            height: 60px;
            font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC', sans-serif;
            font-weight: 500;
            font-style: normal;
            font-size: 16px;
            color: rgba(0, 0, 0, 0.847058823529412);
            line-height: 28px;
            padding: 16px 0px 16px 32px;
        }

        .middle-body {
            display: flex;
            justify-content: center;
            align-content: center;
            top: 60px;
            width: 1136px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            text-align: right;
            font-size: 14px;
            margin-bottom: 50px;

            ul {
                text-align: right;
                margin-right: 0;
                width: 550px;
            }


            li {
                display: flex;
                margin: 25px 0 25px 0;
                align-items: center;
                justify-content: right;
            }

            .middle-body-box2 {
                margin-left: 30px;
                border-width: 0px;
                width: 340px;
                height: 32px;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 14px;
                text-align: left;
                line-height: 32px;

                .radio:nth-child(2) {
                    margin-left: 20px;
                    padding-left: 5px;
                }
            }

            .middle-body-box {
                margin-left: 30px;
                border-width: 0px;
                width: 340px;
                height: 32px;
                font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
                font-weight: 400;
                font-style: normal;
                font-size: 12px;
                border-color: rgba(0, 0, 0, 0.149019607843137);
                text-align: left;
                line-height: 22px;
                border: 1px solid;



                select {
                    width: 338px;
                    height: 30px;
                    outline-color: rgba(24, 144, 255, 1);
                }

                input {
                    width: 338px;
                    height: 30px;
                    outline-color: rgba(24, 144, 255, 1);
                }

                textarea {
                    padding-left: 10px;
                    padding-top: 5px;
                    width: 340px;
                    height: 88px;
                    resize: none;
                    font-size: 12px;
                    border-color: rgba(0, 0, 0, 0.149019607843137);
                    text-align: left;
                    line-height: 22px;
                    outline-color: rgba(24, 144, 255, 1);
                }
            }

            .mr {
                border: 0;

                .box-box {
                    // margin-left: 30px;
                    width: 420px;
                }
            }

        }

        .middle-footer {
            margin-bottom: 20px;
            border-width: 0px;
            display: flex;
            justify-content: center;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-style: normal;
            font-size: 14px;
            color: #FFFFFF;
            line-height: 22px;
            margin-left: 35px;

            .middle-footer-button1 {
                color: white;
                background-color: rgba(24, 144, 255, 1);
                border-radius: 2px;
                border: 1px solid;
                width: 72px;
                height: 32px;
            }

            .middle-footer-button1:hover {
                background-color: rgba(24, 144, 255, .9);
            }

            .middle-footer-button2 {
                margin-left: 20px;
                color: rgba(0, 0, 0, 0.647058823529412);
                background-color: white;
                border-color: rgba(217, 217, 217, 1);
                border-radius: 2px;
                border: 1px solid;
                width: 72px;
                height: 32px;
            }

            .middle-footer-button2:hover {
                border-color: rgba(24, 144, 255, 1);
                color: rgba(24, 144, 255, 1);
            }
        }
    }
}
</style>